<template>
  <div class="custom_user_info_head">
    <div class="custom_user_info_head_content">
      <div class="custom_user_info_head_content_left">
        <router-link :to="item.url">
          <img :src="item.headImage" v-lazy="item.headImage" />
          <article class="custom_user_info_head_content_left_base">
            <header>
              <h1>{{ item.nickName }}</h1>
              <p>{{ item.desc }}</p>
            </header>
          </article>
        </router-link>
      </div>
      <div class="custom_user_info_head_content_right">
        <slot name="userInfoHeadRight" :item="item"></slot>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "userInfoHead",
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.custom_user_info_head {
  .custom_user_info_head_content {
    display: flex;
    padding: 0 (20 / @base);
    .custom_user_info_head_content_left {
      width: 75%;
      padding: (10 / @base) 0;
      a {
        display: flex;
        padding: (10 / @base) 0;
        img {
          width: (32 / @base);
          height: (32 / @base);
          border-radius: (32 / @base);
          overflow: hidden;
          background-color: #999;
        }
        .custom_user_info_head_content_left_base {
          margin: 0 0 0 (10 / @base);
          text-align: left;
          h1 {
            font-size: (14 / @base);
            font-weight: 400;
          }
          p {
            font-size: (12 / @base);
            color: #999;
          }
        }
      }
    }
    .custom_user_info_head_content_right {
      width: 25%;
      text-align: right;
    }
  }
}
</style>
